import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import ibSvg from '@app-cad/assets/svg-icons/commands/product/bracket/l-bracket.svg';
import zbSvg from '@app-cad/assets/svg-icons/commands/product/bracket/z-bracket.svg';
import { Button, Space } from 'antd';
import React, { useState } from 'react';
const images = [ibSvg, zbSvg];

const BracketImagesSlide: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrev = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length,
    );
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  return (
    <div className='flex flex-col max-w-[200px] border-b p-2'>
      <img
        src={images[currentIndex]}
        alt={`Image ${currentIndex + 1}`}
        style={{ borderRadius: 8, height: 150 }}
      />
      <div className='flex justify-center'>
        <Space size='large'>
          <Button
            onClick={handlePrev}
            icon={<LeftOutlined style={{ fontSize: 24, cursor: 'pointer' }} />}
          />
          <Button
            onClick={handleNext}
            icon={<RightOutlined style={{ fontSize: 24, cursor: 'pointer' }} />}
          />
        </Space>
      </div>
    </div>
  );
};

export default BracketImagesSlide;
